<template>
	<view class="content display displayColumn  width_750">
		<u-navbar @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<template slot="left">
				<uni-icons type="left" color="#212121;" size="23"></uni-icons>
			</template>
			<template slot="center">
				<text class="fontSize font_comm title">预约订单</text>
			</template>
		</u-navbar>
		<scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y  display"  @scroll="scroll">
						<view class="width-100 display M-T30">
							<view class="fn_items display  displayColumn all_item" :style="{'margin-left': index==0 ?'30rpx':'86rpx'}" @click="selectIndex=index" v-for="(item,index) in arr" :key="index">
								<span :class="{daiwanchneg:selectIndex==index,daiwanchneg1:selectIndex!=index}" >{{item}}</span>
								<view class="fn_wancheng" v-if="selectIndex==index"></view>
							</view>
						</view>
			</scroll-view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="  "  @scroll="scroll">
						<view class="fn_all display  displayColumn all_item width-100">
							<view class="fn_all_item display  displayColumn">
								<view class="fn_one display ">
									<span class="fn_one_left M-L24">摩卡兄弟（铁道大学站）</span>
									<span class="fn_one_right M-R24">待完成</span>
								</view>
								<view class="fn_two display  " style="margin-top: 16rpx;">
									<view class="fn_two_left display">
										<img class="image M-L24" src="@/static/img/add.png" alt="" />
									</view>
									<view class="fn_two_right display displayColumn displaycenter_jus M-L24">
										<span class="fn_text1">人工普洗服务</span>
										<span class="fn_text2" style="margin-top: 12rpx;">预约时间 2024-5-9 13:20</span>
										<span class="fn_text3" style="margin-top: 12rpx;">预约师傅 李师傅</span>
									</view>
								</view>
								<view class="fn_three display " style="margin-top: 16rpx;">
									<view class="fn_three_left display  displaycenter_aliem M-L24">
										<uni-icons type="phone-filled" color="#126BC9" size="20"></uni-icons>
										<span class="fn_lianxi">联系客户</span>
									</view>
									<view class="fn_three_right display  displaycenter_aliem M-R24">
										<span class="fn_yue1">余额支付:  </span>
										<span class="fn_yue">￥<span style="font-size: 40rpx;">30.00</span></span>
									</view>
								</view>
							</view>
						</view>
				</scroll-view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:['待完成','已完成','已取消','已退款','全部'],
				selectIndex:0
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.title{
	
}
.scroll-Y{
	width: 100%;
	height: 100rpx;
}
.fn_wancheng{
	width: 55rpx;
	height: 6rpx;
	background: #126BC9;
	border-radius: 3rpx 3rpx 3rpx 3rpx;
}
.daiwanchneg{
	font-weight: 600;
	font-size: 28rpx;
	color: #126BC9;
}
.daiwanchneg1{
	font-weight: 400;
	font-size: 24rpx;
	color: #212121;
}
.fn_all{
	
}
.fn_all_item{
	width: 690rpx;
	// height: 288rpx;
	padding-top: 24rpx;
	padding-bottom: 24rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 24rpx 24rpx;
}
.fn_one{
	justify-content: space-between;
}
.fn_one_left{
	font-weight: 600;
	font-size: 24rpx;
	color: #212121;
}
.fn_one_right{
	font-weight: 600;
	font-size: 24rpx;
	color: #FF9901;
}
.image{
	width: 132rpx;
	height: 132rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
}
.fn_text1{
	font-weight: 600;
	font-size: 28rpx;
	color: #000000;
}
.fn_text2{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_text3{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_lianxi{
	font-weight: 600;
	font-size: 24rpx;
	color: #126BC9;
}
.fn_yue1{
	font-weight: 400;
	font-size: 24rpx;
	color: #72778A;
}
.fn_yue{
	font-weight: 600;
	font-size: 24rpx;
	color: #FF672D;
}
.fn_three{
	justify-content: space-between;
}
</style>
